<template>
	<view>
		<nav-bar   fontColor="#FFFFFF" title="新增"></nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>

		<view class="input_form_box">
			
			<view class="input_box btm_line">
				<view class="name required">用户姓名:</view>
				<view class="select_info">
					<view class="input_info">
						<input v-model="formData.nickName" placeholder="请输入用户姓名" placeholder-style="color:#3B5DE0;font-weight:700;letter-spacing: 3rpx" />
					</view>
				</view>
			</view>
			<view class="input_box btm_line">
				<view class="name required">用户性别:</view>
				<picker :range="sexList" :value="index" @change="onPlaceListChange">
					<view class="select_info">
						<view class="value" v-if="sexList[index]!= ''">{{sexList[index]}}</view>
						<view class="select" v-else>请选择</view>
					</view>
				</picker>
			</view>
			<view class="input_box btm_line">
				<view class="name required">身份证号:</view>
				<view class="select_info">
					<view class="input_info">
						<input v-model="formData.idCardNo" type="idcard" placeholder="请输入身份证号" placeholder-style="color:#3B5DE0;font-weight:700;letter-spacing: 3rpx" />
					</view>
				</view>
			</view>
			<view class="input_box btm_line">
				<view class="name required">手机号码:</view>
				<view class="select_info">
					<view class="input_info">
						<input v-model="formData.phone" maxlength="11" type="number" placeholder="请输入手机号码" placeholder-style="color:#3B5DE0;font-weight:700;letter-spacing: 3rpx" />
					</view>
				</view>
			</view>
			<view class="input_box btm_line">
				<view class="name required">归属部门:</view>
				<view class="select_info">
					<view class="input_info" @click="showTree">
						<view class="value" v-if="formData.orgId">{{orgName}}</view>
						<view class="select" v-else>请选择</view>
					</view>
				</view>
			</view>
			<view class="input_box btm_line">
				<view class="name required">登录密码:</view>
				<view class="select_info">
					<view class="input_info">
						<input type="password" v-model="formData.password" placeholder="请输入登录密码" placeholder-style="color:#3B5DE0;font-weight:700;letter-spacing: 3rpx" />
					</view>
				</view>
			</view>
		</view>
		<view style="height: 150rpx;">
			<view style="position: fixed;bottom: 20rpx;width: 100%;z-index: 999;">
				<button @click="submit"
					style="background: #3B5DE0;color: #FFFFFF;border-radius: 10rpx;width: 90%;height: 100rpx;margin: 0 auto;letter-spacing: 5rpx;">提交</button>
			</view>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="3000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :before-close="true" type="info" cancelText="回到菜单" confirmText="继续新建" title="提示"
				content="还有其他用户需要继续新建吗？" @confirm="dialogConfirm()" @close="dialogClose()"></uni-popup-dialog>
		</uni-popup>
		<tki-tree ref="tkitree" :selectParent="selectParent" :multiple="multiple" :range="list" :foldAll="flod" rangeKey="label" @confirm="treeConfirm"></tki-tree>
	</view>
</template>

<script>
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	import ldSelect from '@/components/ld-select/ld-select.vue'
	export default {
		components: {
			ldSelect,
			tkiTree
		},
		data() {
			return {
				placeholderStyle: "font-size: 28upx;color: #3B5DE0;font-weight: 700;letter-spacing: 3rpx;",
				styles: {
					color:'#000000',
					borderColor: 'transparent',
					backgroundColor: '#f5f5f5',
					size: '30rpx'
				},
				multiple: false,
				selectParent: true,
				flod: false,
				msgType: 'success',
				messageText: '这是一条成功提示',
				list:[],//treeSelect
				orgName:'',
				sexList: ['','男','女'],
				index: 0,
				formData:{
					userType:'',//用户类型
					nickName:'',//用户名称
					orgId: '',//部门机构
					phone: '',//手机号
					idCardNo:'',//身份证
					userName:'',//登录账号
					password:'',//登录密码
					sex:'',//性别
					roleIds: [],
					Status:0
				}
			};
		},
		onLoad() {
			this.getTreeData();
			this.formData.userType = uni.getStorageSync('userInfo').userType
			this.formData.roleIds = this.formData.roleIds.concat(uni.getStorageSync('userInfo').userRoles[0].id) 
			console.log(this.formData.roleIds)
		},
		
		//方法
		methods: {
			dialogConfirm(){
				this.$refs.alertDialog.close();
				this.orgName = '',
				this.index = 0,
				this.formData = {
					userType:'',//用户类型
					nickName:'',//用户名称
					orgId: '',//部门机构
					phone: '',//手机号
					idCardNo:'',//身份证
					userName:'',//登录账号
					password:'',//登录密码
					sex:'',//性别
					roleIds: [],
					Status:0
				};
				this.formData.userType = uni.getStorageSync('userInfo').userType
				this.formData.roleIds = this.formData.roleIds.concat(uni.getStorageSync('userInfo').userRoles[0].id) 
			},
			dialogClose(){
				this.$refs.alertDialog.close();
				uni.navigateBack({
					delta: 1
				})
			},
			submit(){
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				let isIDCard = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/
				if(!isIDCard.test(this.formData.idCardNo)){
					this.messageToggle('error','身份证号不正确！')
					return
				}
				else if(!reg.test(this.formData.phone)){
					this.messageToggle('error','手机号码不正确！')
					return
				}
				else if(this.formData.nickName && this.formData.phone && this.formData.idCardNo && this.formData.password && this.sexList[this.index]){
					console.log(this.formData)
					this.formData.userName = this.formData.phone
					let opt = {
						url:'sys/sysUser',
						method:'POST'
					};
					this.$http.httpTokenRequest(opt,this.formData).then(res => {
						if(res.data.code == 200){
							this.$refs.alertDialog.open();
							this.messageToggle('success', res.data.msg)
						}
						else{
							this.messageToggle('error', res.data.msg)
						}
					})
				}
				
				else{
					this.messageToggle('error','请填写完整数据！')
				}
				
			},
			messageToggle(type,msg) {
				this.msgType = type
				this.messageText = msg
				this.$refs.message.open();
			},
			onPlaceListChange(e){
				this.index = e.target.value
				if(this.sexList[this.index] == '男'){
					this.formData.sex = 0
					console.log('男')
				}
				else if(this.sexList[this.index] == '女'){
					this.formData.sex = 1
				}
				else{
					this.formData.sex = ''
				}
			},
			showTree() {
				this.$refs.tkitree._show();
			},
			treeConfirm(e) {
				this.orgName = e[0].label
				this.formData.orgId = e[0].id
				console.log(this.formData.orgId)
			},
			getTreeData(){
				let opt = {
					url:'sys/sysOrg/search/treeSelect',
					method: 'POST'
				};
				this.$http.httpTokenRequest(opt,{}).then(res => {
					this.list = res.data.data
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.textArea {
		border: 1px dashed #d9d9d9;
		// color: #d9d9d9;
		border-radius: 15rpx;
		padding: 20rpx;
		margin-left: 20rpx;
		height: 100rpx;
		width: 85%;
		font-size: 30rpx;
	}

	.select {
		margin-left: 100rpx;
	}

	.scan_ico_class {
		position: absolute;
		right: 30upx;
	}

	.table_box {
		background-color: rgba($color: $themeColor, $alpha: 1);

		.table_title {
			padding: 0rpx 20rpx;
			font-size: 22rpx;
			height: 60rpx;
			line-height: 60rpx;
			color: #ffffff;
			text-align: center;
			font-weight: bold;
			background-color: rgba($color: $themeColor, $alpha: 1);
		}

		.table_head {
			display: flex;
			align-content: center;
			background-color: rgba($color: $themeColor, $alpha: 0.35);

			text {
				padding: 15rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				flex-shrink: 0;
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				border-right: 2rpx solid rgba($color: $themeColor, $alpha: 0.2);

				&:last-child {
					border-right: 0;
					flex: 2;
				}
			}
		}

		.table_content {
			display: flex;
			align-content: center;
			border-top: 2rpx solid rgba($color: $themeColor, $alpha: 0.2);
			background-color: #f5ffc6;

			text {
				padding: 15rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				font-size: 22rpx;
				color: #999;
				border-right: 2rpx solid rgba($color: $themeColor, $alpha: 0.3);

				&:last-child {
					border-right: 0;
					flex: 2;
				}
			}
		}
	}
</style>
